<template>
  <div class="modal_layout" flex="main:center">
    <transition name="el-zoom-in-top">
      <div v-if="value" class="modal_content">
        <div class="module_title" flex="main:justify cross:center">
          {{ title }}
          <!-- <i class="el-icon-close" style="color:#39FFF5" @click="close" /> -->
          <img src="@/assets/img_qingqin/modal/icon-close.png" @click="close">
        </div>
        <div class="modal_layout">
          <slot />
        </div>
      </div>
    </transition>
    <div v-if="value" class="modal_bg" />
  </div>
</template>

<script>
export default {
  model: {
    prop: 'value',
    event: 'close'
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    value: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    this.$nextTick(() => {
      const body = document.querySelector('#resize_container')
      if (body.append) {
        body.append(this.$el)
      } else {
        body.appendChild(this.$el)
      }
    })
  },
  methods: {
    close() {
      this.$emit('close', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.modal_layout{
  .modal_content{
    background: url("~@/assets/img_qingqin/modal/modal_bg.png") no-repeat;
    background-size:100% 100%;
    width: 1700px;
    // height: 1350px;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    top: 400px;
    padding:35px;
    color: #bee2fc;
    font-size: 28px;
    .module_title{
      height: 78px;
      img {
        opacity: 0.6;
        cursor: pointer;
        &:hover {
          opacity: 1;
        }
      }
    }
    .modal_layout{
      max-height: 1350px;
      overflow-y: auto;
    }
  }
  .modal_bg{
    position: fixed;
    width: 3840px;
    height: 2160px;
    background: rgba($color: #000, $alpha: .6);
    left: 0;
    top: 0;
    z-index: 99;
  }
}

</style>
